<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="css/common.css" rel="stylesheet" type="text/style" />
    <link
      href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>jq ajax 获取json数据</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body{
          width: 100%;
          height: 100%;
      }
      #con {
        width: 100%;
        height: 0;
        padding: 0 5%;
      }
      #con table thead td{
        border-top: none;
      }
      table tr {
        text-align: center;
      }
      table tbody tr td {
        border: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <div id="con">
      <table class="table">
        <thead>
          <td>商品名</td>
          <td>价格</td>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $(function() {
        $.ajax({
          url: "./product.json",
          type: "get",
          dataType: "json",
          success: function(data) {
            $.each(data.product, function(index, item) {
              var td_data;
              td_data =
                "<td>" + item.name + "</td>" + "<td>" + item.price + "</td>";
              $("#con table tbody").append("<tr>" + td_data + "</tr>");
            });
          },
	      error:function (err){
		        alert(err);
		    }
        });
      });
    </script>
  </body>
</html>
